<template>

	<scroll-view scroll-y="true" class="scroll-Y" @scroll="PageScrollY">
		<view v-if="isValid(info)">

			<image :src="info.background_img || ossUrl + `/static/index/13.png`" mode="widthFix" class="bg1"></image>
			<view class="content">
				<HeaderBar title="首页" :opacity="opacity" :isGoBack="otherType === 2" :lazy="true"
					@goBackFn="goBackFn" />
				<!-- 占位 -->
				<!-- <div class="hand-card-btn" @click="exchangeCard">
					<image :src="ossUrl + `/static/index/切换(1).png`"></image>递名片
				</div> -->
				<!-- <u-gap :height="15"></u-gap> -->
				<image :src="ossUrl + `/static/index/7.png`" class="bg2"></image>
				<!-- <image :src="ossUrl + `/static/index/菜单.png`" class="setting" :style="{top:top + 'px'}"></image> -->
				<!-- <view :style="{width:'100%',height: height + 'px'}"></view> -->
				<!-- 卡片 -->
				<view class="card">

					<view class="lh" v-if="info.circle_config && info.circle_config.card_logo">
						<image :src="info.circle_config.card_logo" mode="heightFix"></image>
					</view>
					<view class="lh" v-else-if="info.founder === 1">
						<image :src="ossUrl + '/static/image/lh.png'" mode="heightFix"></image>
					</view>

					<view class="hb-img" v-if="info.style_img">
						<card ref="cardRef" :type="type" :is_vip="true" />
					</view>
					<view class="card-content" v-else>
						<view class="card-name">{{info.nickname || ''}}</view>
						<view class="card-zc">{{info.identity || ''}}</view>
					</view>
					<!--   -->
					<view class="real_name" v-if="info.real_name === 1">
						<image :src="ossUrl + `/static/image/vip/${info.vip === 1 ? 2 : 1}.png`"
							v-if="!is_vip && info.vip === 1" mode="widthFix"></image>
						实名
					</view>
					<image :src="ossUrl + `/static/image/vip/${info.vip === 1 ? 4 : 3}.png`" class="card-vip"
						v-else-if="info.vip === 1" mode="widthFix"></image>
					<!-- 互换 -->
					<image :src="ossUrl +  '/static/image/hh.png'" mode="" class="isFriend"
						v-if="info.Friend_Status === 1"></image>
					<!-- <view class="card-tx">兴趣是最好的老师</view> -->
					<view class="card-btn" v-if="!isShare">
						<image :src="ossUrl + `/static/index/11.png`" class="card-btn-bg"></image>
						<view @click="setType()">
							<image :src="ossUrl + `/static/index/切换.png`" class="card-btn-img"></image>
							{{type === 1 ? '编辑视角' : '访客视角'}}
						</view>

					</view>
				</view>
				<!-- 看过 -->
				<view class="nums">
					<view class="nums-img">
						<image :src="it.head" mode="aspectFill" v-for="it in getSlicedArr(info.viewing_traces_head)"
							@click="getIsPrevew ? toMixinIndex(1,{userId: it.id}) : ''" :key="it"></image>
					</view>
					<view class="nums-tx">
						<view class="nums-tx-see">{{info.viewing_traces_count || 0}}人看过</view>
						<image :src="ossUrl + `/static/image/bg.png`" class="nums-sf-img"></image>
						<view class="nums-sf">
							{{info.lv || ''}}

						</view>
					</view>
				</view>
				<!-- 他的时间轴-->
				<!-- 		<view class="hisTimeline" v-if="isShare && info.sjz_type === 1" @click="toOther()">
					<image :src="ossUrl +  '/static/image/share/sj1.png'" mode=""></image>
					TA的时间轴
				</view> -->
				<!-- tab -->


				<view class="tabCard" v-if="isShare">
					<block v-if="userInfo.id!=info.user_id">
						<view class="tabCard-item" @click="collectionFriends">
							<image
								:src="is_collect === 1 ? ossUrl + '/static/image/sc1.png' : ossUrl + '/static/image/share/2.png'"
								mode=""></image>
							{{is_collect === 1 ? '已收藏' : '收藏'}}
						</view>
						<view class="tabCard-item shareBtn">
							<button open-type="share"></button>
							<image :src="ossUrl +  '/static/image/share/1.png'" mode=""></image>
							分享
						</view>

						<view class="tabCard-item" v-if="info.Friend_Status === 1" @click="toPage('私信')">
							<image :src="ossUrl +  '/static/image/share/3.png'" mode=""></image>
							私信
						</view>
						<view class="tabCard-item" v-else @click="AddFriendsClick">
							<image :src="ossUrl +  '/static/image/share/4.png'" mode=""></image>
							递名片
						</view>
					</block>
				</view>



				<template v-else-if="type === 1   ">
					<!-- 按钮 -->
					<view class="btns">
						<view @click="toPage('编辑名片')">
							<image :src="ossUrl + `/static/index/编辑.png`"></image>
							编辑名片
						</view>
						<view @click="toPage('名片样式')">
							<image :src="ossUrl + `/static/index/图标_组件样式.png`"></image>
							名片样式
						</view>
						<view @click="toPage('海报设计')">
							<image :src="ossUrl + `/static/image/hb.png`"></image>
							海报设计
						</view>
					</view>
					<!-- 发名片 -->
					<view class="sendCard-box">
						<view class="senCard shareBtn" @click="circletime">
							<button open-type="share"></button>
							<image :src="ossUrl + `/static/index/6.png`"></image>
							发名片
						</view>
						<view class="sendCard-list">
							<scroll-view scroll-x="true" class="sendCard-scroll-Y">

								<view class="sendCard-list-item" v-for="it in circleList" @click="changeCircle(it)"
									:style="it.isend?'filter: grayscale(100%)':''">
									<div class="sendCard-list-item-col">
										<view class="circle-item-add-icon"
											:class="{'sendCard-list-item-ac': it.business_card_id === info.business_card}">
											<image :src="it.logo"></image>
										</view>
									</div>
									<view class="sendCard-list-item-tx ellipsis">{{it.name}}</view>
								</view>
								<view class="sendCard-list-item circle-item-add" @click="toFindInterest()">
									<div class="sendCard-list-item-col">
										<view class="circle-item-add-icon">
											<uni-icons custom-prefix="iconfont" type="icon-jiahao" size="17"
												color="#ffffff"></uni-icons>
										</view>
									</div>

									<view class="sendCard-list-item-tx">找兴趣</view>
								</view>
							</scroll-view>
						</view>
					</view>

					<!-- 按钮 -->
					<view class="layout">
						<view class="layout-item" @click="toPage('名片数据')">
							<view class="layout-item-image">
								<view>
									<image :src="ossUrl + `/static/index/数据.png`" mode=""></image>
									<!-- <view class="layout-item-nums">92</view> -->
								</view>
							</view>
							<view class="layout-item-tx">
								名片数据
							</view>
						</view>
						<!-- <view class="layout-item" @click="toPage('时间轴')">
							<view class="layout-item-image">
								<view>
									<image :src="ossUrl + `/static/index/名片夹.png`" mode=""></image>
								</view>
							</view>
							<view class="layout-item-tx">
								时间轴
							</view>
						</view> -->
						<view class="layout-item" @click="toPage('名片商城')">
							<view class="layout-item-image">
								<view>
									<image :src="ossUrl + `/static/shopping/1.png`" mode=""></image>

								</view>
							</view>
							<view class="layout-item-tx">
								名片商城
							</view>
						</view>
						<view class="layout-item" @click="toMore(1)" v-if="goodscount">
							<view class="layout-item-image">
								<view>
									<image :src="ossUrl + `/static/image/icon1.png`" mode=""></image>

								</view>
							</view>
							<view class="layout-item-tx">
								知识分享
							</view>
						</view>


						<view class="layout-item" @click="toPage('链接树')">
							<view class="layout-item-image">
								<view>
									<image :src="ossUrl + `/static/index/ljs.jpg`" mode=""></image>

								</view>
							</view>
							<view class="layout-item-tx">
								链接树
							</view>
						</view>

						<!-- 		<view class="layout-item" @click="toPage('教练视频')" v-if="info.creator === 1">
							<view class="layout-item-image">
								<view>
									<image :src="ossUrl + `/static/image/icon1.png`" mode=""></image>
								</view>
							</view>
							<view class="layout-item-tx">
								知识分享
							</view>
						</view> -->

						<view class="layout-item" @click="toPage('名片榜')" v-if="info.the_charts === 1">
							<view class="layout-item-image">
								<view>
									<image :src="ossUrl + `/static/index/3.png`" mode=""></image>
									<!-- <view class="layout-item-nums">
										<u-badge bgColor="#e4393c" max="99" :value="120"></u-badge>
									</view> -->

								</view>
							</view>
							<view class="layout-item-tx">
								名片榜
							</view>
						</view>
						<view class="layout-item" @click="toPage('用户宝典')">
							<view class="layout-item-image">
								<view>
									<image :src="ossUrl + `/static/image/icon2.png`" mode=""></image>
									<!-- <view class="layout-item-nums">2</view> -->
								</view>
							</view>
							<view class="layout-item-tx">
								用户宝典
							</view>
						</view>
						<view class="layout-item">
							<button open-type="contact"></button>
							<view class="layout-item-image">
								<view>
									<image :src="ossUrl + `/static/image/icon3.png`" mode=""></image>
									<!-- <view class="layout-item-nums">2</view> -->
								</view>
							</view>
							<view class="layout-item-tx">
								平台客服
							</view>
						</view>
					</view>
					<!-- 按钮列表 -->
					<view class="btnList" v-if="info.identity_type === 1">
					</view>
				</template>
				<!-- v-if="info.circle_type != 1 && info.enterprise === 1" -->
				<template v-if="info.circle_type != 1 && info.enterprise === 1">
					<!-- 企业简介 -->
					<view class="company" style="margin: 20rpx 30rpx 0;">
						<view class="company-title">{{info.circle_name}}简介</view>
						<view style="padding: 0 30rpx;">
							<view class="company-logo" v-if="info.circle_config.logo" id="logo">
								<image :src="info.circle_config.logo" mode="widthFix"
									:style="{width: logoImgWidth + 'px'}"></image>
							</view>
							<view class="company-video" id="video" ref="videobox">
								<VideoTemplate :src="info.circle_config.video" @btnplay='btnplay'
									:imgUrl="info.circle_config.video + '?x-oss-process=video/snapshot,t_0,f_jpg,w_315'"
									:max_width="videoWidth" ref="VideoTemplateRef" />
							</view>
							<view v-if="info.circle_config" style="line-height: 43rpx;">
								<view class="company-text2" v-html="info.circle_config.text_introduction"
									v-if="info.circle_config.text_introduction"></view>
							</view>

						</view>
					</view>


				</template>




				<view class="linkCardVue" v-if="!Array.isArray(info.tree) ">
					<linkCardVue :data="linkCardVueList" :tree_img="info.tree.tree_img" />
				</view>




				<!-- 项目PPT -->
				<view class="box" v-if="info.pdf.length > 0">
					<view class="box-header">
						<image :src="ossUrl + `/static/index/9.png?imageMogr2/format/webp`"></image>
						<view class="box-header-title"> <text>项目PPT</text></view>
					</view>
					<view class="box-content certificate ppt-box">
						<view class="ppt flex-row-between" v-for="it in info.pdf" @click="prevewPdf(it)">
							<image :src="it.pdf + '?ci-process=doc-preview&page=1&width=100'" class="ppt-img">
							</image>
							<view class="flex-1 flex-row-between">
								<view class="flex-1">
									<view class="ppt-text1">{{it.name || ''}}</view>
									<view class="ppt-text2">{{it.create_time || ''}}</view>
								</view>
								<image :src="ossUrl + '/static/image/f1.png'" class="ppt-icon"></image>
								<!-- <uni-icons custom-prefix="iconfont" type="icon-fenxiang" size="18"></uni-icons> -->
							</view>
						</view>
					</view>
				</view>
				<!-- 海报 -->
				<view class="box" v-if="info.poster" style="margin-top: 121rpx;">
					<view class="box-header">
						<image :src="ossUrl + `/static/index/9.png?imageMogr2/format/webp`"></image>
						<view class="box-header-title"> <text>海报</text></view>
					</view>
					<view class="box-content">
						<image class="hb" :src="info.poster " mode="widthFix" style="border-radius: 20rpx;"
							@click="MpreviewImage([info.poster])">
						</image>
					</view>
				</view>
				<!-- 履历 -->

				<!-- 实拍 -->
				<view class="box" v-if="getSlicedArr(info.real_shooting, 9).length > 0 && info.is_picture === 1">
					<view class="box-header">
						<image :src="ossUrl + `/static/index/9.png?imageMogr2/format/webp`"></image>
						<view class="box-header-title"> <text>实拍</text></view>
					</view>
					<view class="box-more" @click="toCircle">
						TA的全部实拍 <image :src="ossUrl + `/static/index/图层 1.png`" mode=""></image>
					</view>
					<view class="box-content realShooting">
						<view class="realShooting-list" v-for="(it,index) in getSlicedArr(info.real_shooting, 9)"
							@click="MpreviewImage(info.real_shooting.map(i=> i.img),index)" :key="it">
							<view class="realShooting-list-item">
								<image :src="it.img + '?imageView2/1/w/104/h/127'" mode="aspectFill"></image>
								<view class="realShooting-nums" @click.stop="toCircleDetail(it.id)">
									查看日志
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 证书 -->
				<view class="box"
					v-if="info.certificate_arr_user.length > 0 && info.certificate === 1 && info.is_certificate === 1">
					<view class="box-header">
						<image :src="ossUrl + `/static/index/9.png?imageMogr2/format/webp`"></image>
						<view class="box-header-title"> <text>证书</text></view>
					</view>
					<view class="box-content certificate">
						<view class="certificate-list" v-for="(it,index) in info.certificate_arr_user"
							@click="MpreviewImage(info.certificate_arr_user.map(i=> i.certificate),index)" :key="it">
							<view class="certificate-list-item">
								<image :src="it.certificate" mode="heightFix"></image>
							</view>
						</view>
					</view>
				</view>
				<template v-if="Array.isArray(info.career) && info.career.length > 0">
					<view class="box">
						<view class="box-header">
							<image :src="ossUrl + `/static/index/9.png?imageMogr2/format/webp`"></image>
							<view class="box-header-title"> <text>履历</text></view>
						</view>
						<view class="box-content lvli">
							<view class="lvli-list" v-for="(it,index) in info.career" :key="it">
								<view class="lvli-list-left">
									<view class="lvli-list-spot">
										<image :src="ossUrl + `/static/index/21.png`" mode=""></image>
									</view>
									<view class="lvli-list-line" v-if="index < (info.career.length - 1)"></view>
								</view>
								<view class="lvli-list-rig"
									:style="{paddingBottom: index === info.career.length - 1 ? '0rpx' : '81rpx'}">
									<rich-text :nodes="it" space="nbsp"></rich-text>
								</view>

							</view>
						</view>
					</view>
				</template>
				<!-- 带货 -->
				<view class="box" v-if="info.daihuo.length > 0">
					<view class="box-header">
						<image :src="ossUrl + `/static/index/9.png?imageMogr2/format/webp`"></image>
						<view class="box-header-title"> <text>带货</text></view>
					</view>
					<view class="box-more" @click="toShopping(it)" v-if="info.daihuo.length > 6">
						TA的小店 <image :src="ossUrl + `/static/index/图层 1.png`" mode=""></image>
					</view>
					<view class="box-content course">
						<view class="course-list">
							<view class="course-list-item" v-for="it in getSlicedArr(info.daihuo, 6)"
								@click="toShoppingDetail(it)">
								<view class="course-list-item-header">
									<image :src="it.banner + '?imageView2/1/w/164/h/164'" mode="aspectFill"
										class="course-list-item-header-video"></image>
								</view>
								<view class="course-list-item-title" style="font-weight: bold;">{{it.name || ''}}</view>
								<view class="course-list-item-footer">
									<view class="course-list-item-footer-status">
										<text class="course-list-item-footer-price">￥{{it.price || ''}}</text>
										<text
											class="course-list-item-footer-status-tx">{{getPrice(it.Sales) || 0}}人已买</text>
									</view>
									<!-- <view class="course-list-item-footer-nums">
										<image :src="ossUrl + `/static/index/浏览.png`" mode=""></image>
										
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 视频 -->
				<view class="box" v-if="Array.isArray(info.course) && info.course.length > 0">
					<view class="box-header">
						<image :src="ossUrl + `/static/index/9.png?imageMogr2/format/webp`"></image>
						<view class="box-header-title"> <text>视频</text></view>
					</view>
					<view class="box-more" @click="toMore" v-if="info.course.length > 6">
						TA的全部视频 <image :src="ossUrl + `/static/index/图层 1.png`" mode="aspectFill"></image>
					</view>
					<view class="box-content course"
						:style="'border-radius:'+(info.evaluate.length > 0?'20rpx 20rpx  0 0':'20rpx')">
						<view class="course-list">
							<view class="course-list-item" v-for="it in getSlicedArr(info.course, 6)"
								@click="toDetail(it.id)" :key="it.img">
								<view class="course-list-item-header">
									<image :src="it.img" class="course-list-item-header-video" mode="aspectFill">
									</image>
									<image :src="ossUrl + `/static/index/播放.png`" mode=""
										class="course-list-item-header-play"></image>

								</view>
								<view class="course-list-item-title">{{it.title}}</view>
								<view class="course-list-item-footer">
									<view class="course-list-item-footer-status"></view>
									<view class="course-list-item-footer-nums">
										<image :src="ossUrl + `/static/index/浏览.png`" mode=""></image>
										{{it.play_count}}
									</view>
								</view>
							</view>
						</view>
					</view>

					<view v-if="Array.isArray(info.evaluate) && info.evaluate.length > 0" class="box-content comment"
						style="margin-top: 0;border-radius: 0 0 20rpx 20rpx;">


						<view class="pj">
							<view class=""></view>
							<text>TA的评价</text>
						</view>
						<view class="comment-list">
							<view class="comment-list-item" v-for="it in getSlicedArr(info.evaluate, 3)">
								<view class="comment-list-item-avatar" @click="toMixinIndex(1,{userId: it.id})">
									<image :src="it.head" mode=""></image>
								</view>
								<view class="comment-list-item-rig">
									<view class="comment-list-item-rig-header">
										<view class="comment-list-item-rig-header-l">
											<view class="comment-list-item-rig-header-l-name">{{it.nickname || ''}}
											</view>
											<image
												:src="ossUrl + `/static/setting/${it.user.sex === '女' ? '7' : '6'}.png`"
												mode=""></image>
										</view>
										<view class="comment-list-item-rig-header-r" @click="report(it)">
											<image :src="ossUrl + `/static/index/举报.png`" mode=""></image>
											举报
										</view>
									</view>
									<view class="comment-list-item-rig-star">
										<view class="comment-list-item-rig-star-tx">参与视频：{{it.course_name}}</view>
										<view class="comment-list-item-rig-star-item">
											<u-rate :value="it.score / 2" :allowHalf="true" readonly
												activeColor="#F2CB51" inactiveColor="#B3B3B3"></u-rate>
										</view>
									</view>
									<view class="comment-list-item-rig-content">
										{{it.content}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>


				<!-- 评价 -->
				<!-- 		<view class="box" v-if="Array.isArray(info.evaluate)&&info.evaluate.length > 0" style="margin-top: 0;">
					<view class="box-header">
						<image :src="ossUrl + `/static/index/9.png?imageMogr2/format/webp`"></image>
						<view class="box-header-title"> <text>评价</text></view>
					</view>

				</view> -->
				<!-- 成员 -->
				<view class="box" v-if="info.Is_it_displayed.length > 0 && info.circle_type != 1">
					<view class="box-header">
						<image :src="ossUrl + `/static/index/9.png?imageMogr2/format/webp`"></image>
						<view class="box-header-title"> <text>成员</text></view>
					</view>
					<view class="box-content member">
						<view class="member-item" v-for="it in info.Is_it_displayed" @click="toMember(it)">
							<image :src="it.head" mode=""></image>
							<view class="member-item-r">
								<view class="member-item-r-name">{{it.nickname}}</view>
								<view class="member-item-r-title ellipsis">{{it.identity}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 宣言 -->
				<view class="box" v-if="info.declaration">
					<view class="box-header">
						<image :src="ossUrl + `/static/index/9.png?imageMogr2/format/webp`"></image>
						<view class="box-header-title"> <text>宣言</text></view>
					</view>
					<view class="box-content declaration">
						<view v-html="info.declaration"></view>
					</view>
				</view>
				<!-- 名片交换请求 -->
				<!-- view. -->
				<!-- 占位 -->
				<u-gap height="80"></u-gap>
			</view>
			<!-- 切换名片 -->
			<ChangeCard ref="ChangeCardRef" @reload="reload" :businessCard="info.business_card" />
			<ExchangeCard ref="ExchangeCardRef" @reload="reload" :businessCard="info.business_card" />
			<AddFriends ref="AddFriendsRef" @reload="reload" :circleId="info.circle_id" :businessCard="info.id"
				:otherId="info.business_card" />
			<!-- 提示 -->
			<view :class="{'gz-tip':true,'gz-ac-tip':tip}">
				<view class="gz-tx" v-html="formattedText(message)"></view>
				<view class="gz-close" @click="tip = false">
					<view class="gz-close-icon">
						<u-icon name="close" color="#fff" size="10"></u-icon>
					</view>

				</view>
			</view>
			<!-- 兴趣  -->
			<view class="interest-box" v-if="isShare || type ===  2">
				<view class="interest-title" @click="interestShow">
					<view style="margin-bottom: 15rpx">兴</view>
					<view>趣</view>
				</view>
				<view :class="{'interest-list': true, 'interest-list-ac': interest_show }">
					<scroll-view scroll-x="true" class="interest-scroll-Y">
						<view class="interest-list-item" v-for="it in circleListSelect"
							@click="toIndexOther(it.business_card_id)">
							<image :src="it.logo"></image>
							<view class="interest-list-item-tx ellipsis">{{it.name}}</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="footer-btn" v-if="is_add_circle === 0 || isOther === 1">
			<view class="createCard" @click="addCircle" v-if="is_add_circle === 0">
				创建我的名片
			</view>
			<image :src="ossUrl + `/static/backHome.png`" mode="" class="backHome" v-if="isOther === 1" @click="goBack">
			</image>
		</view>
		<!-- <u-toast ref="uToast"></u-toast> -->
		<u-modal :show="show" content='您的会员已到期 ！' confirmText="续费" cancelText="退圈" :showCancelButton="true"
			confirmColor="#000" cancelColor="#e4393c" :closeOnClickOverlay="true" @close="close" v-if="isOther != 1"
			@confirm="openMember"></u-modal>
		<!-- 会员弹窗 -->
		<MemberPopupVue ref="MemberPopupVueRef" @reload="reload" />



		<u-modal :show="modalshow" content='该名片已到期!' :closeOnClickOverlay="false" showCancelButton=true title="提示"
			@close="()=>modalshow=false">
			<view slot="confirmButton" class="confirmButton">
				<block v-if="isShare">
					<view class=""><u-button @click="reluchhome" color="#12B475" iconColor='#12B475'  text="回到首页" size="normal" type="success"></u-button>
					</view>
				</block>
				<block v-else>
					<view class=""><u-button @click="setnewcard" iconColor='#12B475' color="#12B475"  text="切换名片" size="normal" type="success"></u-button>
					</view>

					<view v-if="info.circle_host==1"><u-button @click="xufei" color="#12B475" iconColor='#12B475' text="立即续费" plain size="normal"
							type="success"></u-button></view>

					<view class="" v-else><u-button text="联系客服" iconColor='#12B475' color="#12B475"  open-type="contact" plain size="normal"
							type="success"></u-button></view>



				</block>


			</view>
		</u-modal>


	</scroll-view>
</template>

<script>
	import linkCardVue from '@/components/linkCard/linkCard.vue';
	import ChangeCard from './components/changeCard/changeCard.vue'
	import AddFriends from './components/addFriends/addFriends.vue'
	import VideoTemplate from '../circle/components/videoTemplate/video.vue'
	import MemberPopupVue from '@/components/memberPopup/memberPopup.vue'

	import {
		InformationBusinessCard,
		InformationSendFriendRequest,
		InformationBusinessCardCollect,
		InformationAuthentication,
		InformationUserBusinessCardHeadData,
		InformationReportMessage,
		InformationOfficialAccount,
		InformationMassageCourse,
		user_poster,
		report_course_evaluate,
		business_collect_type,
		InformationBusinessCardList,
		user_circle,
		recently_visited_circle,
		InformationSwitchBusinessCard,
		InformationUserInfo,
		user_circle_type,
		circle_recently_visited,
		InformationCourseList,
		circle_up_time
	} from '@/common/http/api.js'
	import HeaderBar from "@/components/header/header.vue";
	import card from '@/components/card/card.vue'
	import ExchangeCard from './components/exchangeCard'
	import {
		throttle
	} from '@/common/util.js'

	export default {
		props: ['isBackHome', 'isCreateCard', 'isOther', 'showM'],
		components: {
			ChangeCard,
			HeaderBar,
			card,
			AddFriends,
			linkCardVue,
			ExchangeCard,
			VideoTemplate,
			MemberPopupVue,
		},
		watch: {
			'showM': {
				handler(val) {
					if (val) {
						this.setinfo()
					}
				},
				deep: true,
				immediate: true
			}
		},

		data() {
			return {
				modalshow: false,
				top: 0,
				height: 0,
				info: '',
				type: 1, // 2 访客 1 编辑
				isShare: false,
				userId: '',
				shareId: '',
				isbtnplay: false,
				opacity: 0,
				isShow: false,
				showPopup: false,
				popupImg: '',
				message: '',
				tip: false,
				otherType: 1,
				is_collect: 2,
				CardList: [],
				circleList: [],
				circleListSelect: [],
				// 兴趣
				interest_show: false,
				videoWidth: 0,
				userInfo: {},
				is_add_circle: 1,
				logoWidth: 0,
				goodscount: 0,
				logoImgInfoWidth: 0,
				is_first: true,
				show: false
			}
		},
		created() {
			// 获取胶囊按钮的位置信息
			let menuButtonRect = wx.getMenuButtonBoundingClientRect();

			this.top = menuButtonRect.height + menuButtonRect.top - 21

			this.height = menuButtonRect.height + menuButtonRect.top + 14


		},
		computed: {

			getAuthentication() {
				let arr = []
				try {
					if (this.isValid(this.info.authentication.career)) {
						arr = arr.concat(this.info.authentication.career)
					}
					if (this.isValid(this.info.authentication.coach)) {
						arr = arr.concat(this.info.authentication.coach)
					}
					if (this.isValid(this.info.authentication.site)) {
						arr = arr.concat(this.info.authentication.site)
					}
					arr = arr.filter(i => i != '')
				} catch (e) {
					//TODO handle the exception
				}
				return arr;
			},
			imgs() {
				return this.$store.state.share.share_img
			},
			getIsPrevew() {
				return this.userInfo.vip === 1 || this.userInfo.founder === 1 || (this.userInfo.id === this.info.id)
				//return true
			},
			logoImgWidth() {
				if (this.logoImgInfoWidth < this.logoWidth) {
					return this.logoImgInfoWidth
				}
				if (this.logoImgInfoWidth >= this.logoWidth) {
					return this.logoWidth
				}
				return 0
			},


			linkCardVueList() {


				if (this.info.tree && this.info.tree.list) {

					return this.info.tree.list.filter(i => i.state === 1)
				}
				return []
			}
		},

		methods: {
			reluchhome() {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
			xufei(){
				uni.navigateTo({
					url:"/pagesA/beforeCreateCircle/beforeCreateCircle?cid="+this.info.circle_id+'&ctype='+this.info.circle_type
				})
			},
			circletime() {

				circle_up_time({
					circle_id: this.info.circle_id,
					type: 4
				})
			},
			getGoodsCount() {
				InformationCourseList({
					id: '',
					page: 1,
					circle_id: this.info.circle_id,
				}).then(res => {
					this.goodscount = res.data.length
				})
			},
			openMember() {
				this.show = false
				this.$refs.MemberPopupVueRef.show()
			},
			close() {
				this.show = false
			},
			toCircleDetail(id) {
				uni.navigateTo({
					url: '/pages/circle/detail?id=' + id
				})
			},
			getLogoInfo(url) {
				if (!url) return
				uni.getImageInfo({
					src: url,
					success: image => {
						this.logoImgInfoWidth = image.width
					}
				});
			},
			getLogoWidth() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('#logo').boundingClientRect(res => {
						if (res) {
							this.logoWidth = res.width
						}
					}).exec();
				})
			},
			getDivWidth() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('#video').boundingClientRect(res => {
						if (res) {

							this.videoWidth = res.width
						}
					}).exec();
				})
			},
			toMember(it) {
				uni.navigateTo({
					url: '/pages/index/other?isBackHome=2&shareId=' + it.b_id
				})
			},
			prevewPdf(item) {
				if (item.pdf === '') {
					this.$u.toast('地址为空！')
					return
				}
				uni.downloadFile({
					url: item.pdf,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {

							}
						});
					}
				});
			},
			toIndexOther(id) {
				uni.navigateTo({
					url: '/pages/index/other?isBackHome=2&shareId=' + id
				})
			},
			changeCircle(it) {
				if (it.isend) {
					uni.showToast({
						title: "该名片已到期",
						icon: "none"
					})
					return
				}
				uni.showLoading()
				InformationSwitchBusinessCard({
					id: it.business_card_id,
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						duration: 3000,
						title: '切换成功！',
						icon: 'none'
					})
					circle_recently_visited({
						type: 2,
						circle_id: it.id
					})
					this.reload()
				})
			},
			toCircleItem(id) {
				uni.showLoading()
				recently_visited_circle({
					id
				}).then(res => {
					uni.hideLoading()
					uni.switchTab({
						url: '/pages/circle/circle'
					})
				})
			},
			toFindInterest() {
				uni.navigateTo({
					url: '/pagesA/findInterest/findInterest'
				})
			},
			interestShow() {
				this.interest_show = !this.interest_show
			},
			goTointerest() {
				uni.redirectTo({
					url: '/pagesA/findInterest/findInterest'
				})
			},
			getPrice(price) {
				let p = price
				try {
					if (price >= 10000) {
						p = price / 10000
						p = p.toFixed(1) + 'w'
					}
				} catch (e) {

				}

				return p
			},
			toShopping(it) {
				if (!this.getAuth()) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pagesA/shopping/shopping?type=1&business_card_id=' + this.info.business_card +
						'&nickname=' + this.info.nickname
				})
			},
			toShoppingDetail(it) {
				uni.navigateTo({
					url: '/pagesA/shopping/detail?type=1&id=' + it.id + '&business_card_id=' + this.info
						.business_card + '&nickname=' + this.info.nickname
				})
			},
			createCard() {
				this.$emit('createCard', this.info.circle_id)
			},
			addCircle() {

				uni.showModal({
					title: '',
					content: `是否加入${this.info.circle_name}圈子？`,
					showCancel: true,
					cancelText: '去加入',
					confirmText: '找兴趣',
					confirmColor: '#12B475',
					cancelColor: '#12B475',
					success: res => {
						if (res.cancel) {
							if (this.info.circle_type != 1) {
								uni.navigateTo({
									url: '/pages/index/addCard?id=' + this.info.circle_id +
										'&name=' + this.info.circle_name
								})
							} else {
								uni.navigateTo({
									url: '/pages/index/addCard?id=' + this.info.circle_id
								})
							}
						} else if (res.confirm) {
							uni.navigateTo({
								url: '/pagesA/findInterest/findInterest'
							})
						}
					}
				});

			},
			goBack() {
				this.$store.commit('setIsRefresh', true)
				uni.reLaunch({
					url: '/pages/loading/loading'
				})
			},
			goBackFn() {

				if (this.userId) {
					uni.navigateBack()
				} else {
					if (this.isBackHome == 1) {
						this.$store.commit('setIsRefresh', true)
						uni.reLaunch({
							url: '/pages/loading/loading'
						})
					} else if (this.isBackHome == 2) {
						uni.navigateBack()
					} else {
						this.$store.commit('setIsRefresh', true)
						uni.reLaunch({
							url: '/pages/loading/loading'
						})
					}

				}



			},
			toCircle() {
				uni.navigateTo({
					url: '/pages/circle/other?b_id=' + this.info.business_card + '&userId=' + this.info.id
				})
			},
			formattedText(e) {
				// 替换换行符为 <br> 标签
				if (!e) return ''
				return e.replaceAll(/\n/g, '<br/>');
			},
			btnplay(e) {
				this.isbtnplay = e
			},
			stopVideo: throttle(function() {


				const query = uni.createSelectorQuery().in(this);

				query.select('#video').boundingClientRect(data => {

					if (data && this.isbtnplay) {
						let num = data.height + data.top - 100
						if (num <= 0) {
							this.$refs.VideoTemplateRef.pause()
						} else {
							this.$refs.VideoTemplateRef.play()

						}
					}


				}).exec();

			}, 500),
			PageScrollY(e) {
				const scrollTop = e.detail.scrollTop;
				// 计算透明度值
				this.opacity = Math.min(scrollTop / 100, 1);
				this.interest_show = false



				this.stopVideo()
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pagesB/teachingCourses/teachingCourses?id=' + id
				})
			},
			collectionFriends() {
				if (!this.getAuth(true)) return
				uni.showLoading()
				InformationBusinessCardCollect({
					collect_user_id: this.info.id
				}).then(res => {
					uni.hideLoading()
					if (this.is_collect === 1) {
						this.is_collect = 2
					} else {
						this.is_collect = 1
					}

				})
			},
			addFriends() {


				this.circletime()
				if (!this.getAuth(true)) return
				uni.showLoading()
				InformationSendFriendRequest({
					id: this.info.business_card
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						duration: 3000,
						title: '已递名片！',
						icon: 'none'
					})



				})
			},
			reload() {
				this.getData({
					userId: this.userId,
					shareId: this.shareId
				});
			},
			setType() {
				if (this.type === 1) {
					this.type = 2
				} else {
					this.type = 1
				}
			},
			report(it) {
				uni.showModal({
					title: '',
					content: '请确认是否举报？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					confirmColor: '#12B475',
					success: res => {
						if (res.confirm) {
							uni.showLoading()
							report_course_evaluate({
								id: it.course_evaluate_id
							}).then(res => {
								uni.hideLoading()
								uni.showToast({
									duration: 3000,
									title: '举报成功!',
									icon: 'none'
								})


							})
						} else if (res.cancel) {

						}
					}
				});
			},
			getSlicedArr(arr, num = 8) {
				if (Array.isArray(arr) && arr.length > 0) {
					return arr.slice(0, num);
				}
				return []
			},
			setShare() {
				let token = uni.getStorageSync('token')
				this.token = token
				if (token) {
					//判断是否领取名片
					this.isLoading = true
					uni.showLoading()
					InformationBusinessCard().then(res => {
						uni.hideLoading()
						//获取分享的图片

						let params = {
							business_card_id: this.shareId,
							user_id: e.shareId
						}
						this.$store.dispatch('getShare', params)
					})

				}
			},
			setinfo() {
				InformationBusinessCard({
					user_id: this.userId,
					need: 1,
					share_business_card_id: this.shareId
				}).then(res => {
					if (this.info && this.info.tree) {
						this.info.tree = res.data.tree
					}

				})

			},

			getisend() {
				let nowdate = new Date()
				let target = new Date(this.info.end_time)
				if (target < nowdate) {
					this.modalshow = true
				}
			},
			// 切换名片
			setnewcard() {
				if (this.circleList.length == 0) {
					return
				}
				if (this.circleList.length == 1) {
					uni.navigateTo({
						url: '/pagesA/findInterest/findInterest'
					})
				}

				let lastNotTrue = null

				// 先判断前面4个
				let newArray = this.circleList.slice(0, 4);
				lastNotTrue = newArray.findLast(item => (item.isend == false && item.business_card_id != this.info
					.business_card));
				if (!lastNotTrue) {
					let index = this.circleList.findIndex(item => (item.isend == false && item.business_card_id != this
						.info.business_card));
					if (index != -1) {
						lastNotTrue = this.circleList[index]
					} else {
						lastNotTrue = null
					}
				}
				if (!lastNotTrue) {
					uni.navigateTo({
						url: '/pagesA/findInterest/findInterest'
					})
				} else {
					this.changeCircle(lastNotTrue)
					this.modalshow = false
				}

			},

			//user_id 用户 点击某人进入   share_business_card_id 分享进入
			getData(params) {


				if (params.otherType) {
					this.otherType = params.otherType
				}
				this.userId = params.userId
				this.shareId = params.shareId
				if (params?.userId || params?.shareId) {
					this.isShare = true
				} else {
					this.isShare = false
				}
				if (!this.isShare) {
					//没得分享
					user_poster().then(res => {
						// res.data.forEach(i=>{
						// 	this.$refs.uToast.show({
						// 		type: 'error',
						// 		icon: false,
						// 		message: i
						// 	})
						// })
						if (Array.isArray(res.data) && res.data.length > 0) {
							this.message = res.data.join(',')
							this.tip = true
						}

					})

				}

				let token = uni.getStorageSync('token')
				if (token) {
					//获取当前用户信息
					InformationUserInfo().then(res => {
						this.userInfo = res.data


					})
				}


				uni.showLoading()
				InformationBusinessCard({
					user_id: params.userId,
					share_business_card_id: params.shareId
				}).then(res => {
					uni.hideLoading()
					let business_card = res.data.business_card
					this.info = res.data
					if (this.info.end_time) {
						this.getisend()
					}



					this.getGoodsCount()
					this.$store.commit("setCardInfo", res.data)
					this.getDivWidth()
					this.getLogoWidth()
					if (this.info.circle_config) {
						this.getLogoInfo(this.info.circle_config.logo)
					}

					//判断是否加入 0 没在圈子 1在
					if (params.otherType === 2 && res.data.circle_id > 0) {
						user_circle_type({
							circle_id: res.data.circle_id
						}).then(d => {
							this.is_add_circle = d.data

						})
					}

					if (this.circleList.length === 0) {
						//圈子列表
						user_circle({
							type: 4,
							user_id: res.data.id
						}).then(({
							data
						}) => {
							data.forEach(item => {
								item.isend = false
								let nowdate = new Date()
								let target = new Date(item.end_time)
								if (item.end_time && target < nowdate) {
									item.isend = true
								}
							})

							this.circleList = data

						})
					}

					//侧拉
					user_circle({
						type: 5,
						user_id: res.data.id
					}).then(({
						data
					}) => {
						this.circleListSelect = data
					})

					business_collect_type({
						user_id: res.data.id
					}).then(res => {
						this.is_collect = res.data
					})

					let token = uni.getStorageSync('token')


					this.getCardStyle(business_card)
					this.$store.dispatch('getShare', {
						business_card_id: business_card
					})

				})


			},
			getCardStyle(business_card_id) {
				uni.showLoading()
				let data = {}

				data['business_card_id'] = business_card_id
				InformationUserBusinessCardHeadData(data).then(res => {
					uni.hideLoading()
					this.$nextTick(() => {

						this.$refs.cardRef.show(res.data.business_card_layout, res.data.user, res.data.user
							.user_img, this.info)
					})
				})
			},
			AddFriendsClick() {
				if (!this.getAuth(true)) return
				InformationBusinessCardList().then(res => {
					this.CardList = res.data
					if (Array.isArray(this.CardList) && this.CardList.length === 1) {
						this.addFriends()
						return
					}
					this.$refs.AddFriendsRef.show()
				})

			},
			exchangeCard() {
				this.$refs.ExchangeCardRef.show()
			},
			changeCard() {
				this.$refs.ChangeCardRef.show()
			},
			toMore(e) {
				uni.navigateTo({
					url: '/pagesA/courseList/courseList?id=' + this.info.id + '&cid=' + this.info.circle_id +
						'&type=' + e
				})

			},
			toOther() {
				uni.navigateTo({
					url: '/pagesA/timeAxis/timeAxis?id=' + this.info.id
				})
			},
			toPage(name) {

				if (!this.getAuth()) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				switch (name) {
					case '链接树':
						if (this.info.circle_type == 1) {

							if (this.info.vip == 1) {
								uni.navigateTo({
									url: '/pagesC/link-tree/link-tree'
								})
							} else {
								this.openMember()
							}

						} else {

							uni.navigateTo({
								url: '/pagesC/link-tree/link-tree'
							})

						}
						break;
					case '编辑名片':
						uni.navigateTo({
							url: '/pagesC/index/editData?id=' + this.info.business_card
						})
						break;
					case '名片样式':
						uni.navigateTo({
							url: '/pagesA/setCardStyle/setCardStyle?id=' + this.info.business_card
						})
						break;
					case '名片数据':
						uni.navigateTo({
							url: '/pagesA/cardData/cardData'
						})
						break;
					case '时间轴':
						uni.navigateTo({
							url: '/pagesA/timeAxis/timeAxis'
						})
						break;
					case '名片榜':
						uni.navigateTo({
							url: '/pagesA/popularityChart/popularityChart'
						})
						break;
					case '海报设计':
						uni.navigateTo({
							url: '/pagesA/posterDesign/posterDesign?id=' + this.info.business_card +
								'&circle_id=' + this.info.circle_id
						})
						break;
					case '认证中心':
						uni.showLoading()
						InformationAuthentication().then(res => {
							uni.hideLoading()
							uni.navigateTo({
								url: '/pagesA/authenticationCenter/authenticationCenter'
							})
						})

						break;
					case '教练履历':
						uni.navigateTo({
							url: '/pagesC/index/addResume?id=' + this.info.id
						})
						break;
					case '教练视频':
						uni.navigateTo({
							url: '/pagesA/videoManagement/videoManagement'
						})
						break;
					case '私信':
						uni.navigateTo({
							url: '/pagesA/wxChat/wxChat?id=' + this.info.id + '&circle_id=' + this.info.circle_id
						})
						break;
					case '名片商城':
						uni.navigateTo({
							url: '/pagesA/shopping/shopping?type=2&circle_id=' + this.info.circle_id +
								'&circle_name=' + this.info.circle_name
						})
						break;
					case '用户宝典':
						uni.navigateTo({
							url: '/pagesA/userHelp/userHelp'
						})
						break;
				}
			}
		}
	}
</script>

<style>
	.u-notice-bar {
		border-radius: 20rpx !important;
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-mask {
		background-color: rgba(0, 0, 0, 1);
		/* 设置遮罩层背景颜色 */
		opacity: 1;
		/* 设置遮罩层透明度 */
	}

	.confirmButton {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;

		&>view {
			width: 40%;
		}

	}

	.pj {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		view {
			width: 8rpx;
			height: 30rpx;
			border-radius: 4rpx;
			background: goldenrod;
		}

		text {
			font-weight: bold;
			color: #333;
			font-size: 28rpx;
			margin-left: 12rpx;
		}
	}

	.ppt-box {
		display: grid !important;
		grid-template-columns: repeat(1, 1fr) !important;
		width: 100%;
		box-sizing: border-box;
		white-space: unset !important;
	}

	.ppt {
		margin-bottom: 20rpx;
		display: flex;

		.ppt-text1 {
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
			display: flex;

		}

		.ppt-text2 {
			font-size: 24rpx;
			color: #999;
		}

		.ppt-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
			margin-right: 10rpx;
		}

		.ppt-icon {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.ppt:last-child {
		margin-bottom: 0;
	}

	.company {
		margin-top: 20rpx;
		background-color: #fff;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		overflow: hidden;
		padding-bottom: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;

		.company-logo {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;
			min-height: 1rpx;
		}

		.company-text2 {}

		.company-video {
			width: 100%;
			// height: 400rpx;
			border-radius: 40rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			margin-top: 20rpx;
		}

		.company-title {
			font-family: PingFang SC;
			font-weight: 600;
			font-size: 34rpx;
			color: #fff;
			padding: 20rpx 40rpx;
			background-color: #8e8e8e;

		}

		.company-text1 {
			color: #ddaa5b;
			font-weight: bold;
		}
	}

	.scroll-Y {
		width: 100vw;
		height: 100vh;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.shareBtn {
		width: 100%;
		height: 100%;
		position: relative;

		button {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			opacity: 0;
		}
	}

	.bg1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 494rpx;
		z-index: -2;
	}

	.content {
		width: 100%;
		position: relative;
		min-height: 100vh;

		.hand-card-btn {
			position: fixed;
			bottom: 200rpx;
			right: 10rpx;
			width: 220rpx;
			height: 77rpx;
			background: #FFFFFF;
			border-radius: 39rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 14rpx;
			}
		}
	}

	.bg2 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: none;
		z-index: -3;
	}

	.setting {
		position: absolute;
		top: 0;
		left: 39rpx;
		width: 42rpx;
		height: 42rpx;
	}

	.card {
		width: 690rpx;
		height: 380rpx;
		margin: 0 auto;
		position: relative;
		margin-top: 30rpx;
		box-shadow: 0rpx 10rpx 8rpx 0rpx rgba(14, 67, 44, 0.15);
		border-radius: 30rpx;
		background: #F6F7F8;

		.lh {
			position: absolute;
			top: -90rpx;
			left: 0;
			height: 80rpx;
			z-index: 8;

			image {
				height: 100%;
			}
		}

		.card-bg {
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 30rpx;

		}

		.card-vip {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			z-index: 99;
			width: 40rpx;
		}

		.real_name {
			// width: 83rpx;
			padding: 0 15rpx;
			height: 35rpx;
			background: #D2FCEC;
			border-radius: 5rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #23B97F;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			z-index: 99;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 20rpx;
				margin-right: 6rpx;
			}
		}

		.isFriend {
			width: 84rpx;
			height: 84rpx;
			position: absolute;
			right: 0rpx;
			bottom: 0rpx;
			z-index: 99;
		}

		.card-left {
			position: absolute;
			top: 47rpx;
			left: 30rpx;

			.card-left-item {
				display: flex;
				align-items: center;

				image {
					width: 34rpx;
					height: 34rpx;
					margin-right: 13rpx;
					margin-bottom: 14rpx;
				}

				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000;
			}
		}

		.card-content {
			position: absolute;
			bottom: 30rpx;
			left: 30rpx;

			.card-name {
				font-family: DOUYU;
				font-weight: normal;
				font-size: 48rpx;
				color: #000;
				margin-bottom: 14rpx;
			}

			.card-zc {
				padding: 14rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #fff;
				background: rgba(1, 8, 0, 0.7);
				border-radius: 25rpx;
				display: inline-flex;
			}
		}

		.card-tx {
			position: absolute;
			bottom: 63rpx;
			right: 20rpx;
			width: 300rpx;
			text-align: center;
			font-family: PingFang SC;
			font-weight: 600;
			font-size: 26rpx;
			color: #313131;
		}

		.card-btn {
			position: absolute;
			right: 0rpx;
			top: 150rpx;
			width: 132rpx;
			height: 48rpx;
			z-index: 99;

			.card-btn-bg {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}

			.card-btn-img {
				width: 26rpx;
				height: 26rpx;
				margin-right: 4rpx;
			}

			&>view {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 9;
			}
		}
	}

	.nums {
		width: 690rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		margin: 0 auto;
		margin-top: 24rpx;

		.nums-img {
			padding-left: 36rpx;
			min-width: 0;
			flex: 1;
			display: flex;
			align-items: center;

			image {
				width: 56rpx;
				height: 56rpx;
				border-radius: 50%;
				border: 2px solid #E5E5E5;
			}

			// 定义变量，设置循环次数
			$num-items: 10;

			// 循环生成样式
			@for $i from 1 through $num-items {
				image:nth-child(#{$i}) {
					transform: translateX($i * -6rpx);
				}
			}
		}

		.nums-tx {
			width: 140rpx;
			font-family: PingFang SC;
			font-weight: bold;

			height: 80rpx;
			position: relative;

			.nums-tx-see {
				height: 40rpx;
				text-align: center;
				font-size: 22rpx;
				color: #999999;
				line-height: 40rpx;
			}

			image {
				width: 191rpx;
				height: 83rpx;

				position: absolute;
				bottom: 0rpx;
				right: 0;
				z-index: 0;
			}
		}

		.nums-sf {
			color: #fff;
			height: 40rpx;
			position: absolute;
			right: 18rpx;
			bottom: 0;
			z-index: 2;
			width: 122rpx;
			// display: flex;
			// align-items: center;
			// justify-content: center;
			line-height: 40rpx;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 22rpx;
			color: #fff;
		}
	}

	.btns {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 34rpx;

		&>view {
			width: 220rpx;
			height: 77rpx;
			background: #FFFFFF;
			border-radius: 39rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 14rpx;
			}

			font-family: PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #292B3B;
		}
	}

	.interest {
		width: 690rpx;
		margin: 0 auto;
		background-color: #52606a;
		border-radius: 40rpx;

		.interest-contianer {
			padding: 20rpx;
			display: flex;

			.interest-img {
				width: 70rpx;
				height: 70rpx;
				background-color: red;
				border-radius: 10rpx;
			}

			.interest-text {
				font-size: 20rpx;
				color: #fff;
				text-align: center;
			}
		}
	}

	.senCard {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		background: #21222B;
		border-radius: 40rpx;

		image {
			width: 42rpx;
			height: 42rpx;
			margin-right: 12rpx;

		}

		font-family: PingFang SC;
		font-weight: 600;
		font-size: 26rpx;
		color: #FFFFFF;
		margin-top: 34rpx;
	}

	.layout {
		width: 690rpx;
		height: 173rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		overflow-x: scroll;
		display: inline-flex;


		.layout-item {

			height: 100%;
			margin-right: 30rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			position: relative;

			button {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				z-index: 99;
			}

			.layout-item-image {
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 22rpx;

				&>view {
					width: 58rpx;
					height: 58rpx;
					position: relative;

					.layout-item-nums {
						position: absolute;
						left: 40rpx;
						top: 0rpx;
						transform: scale(0.8);
					}
				}
			}

			.layout-item-tx {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #292B3B;
				text-align: center;
				width: 104rpx;
			}
		}

		.layout-item:first-child {
			margin-left: 30rpx;
		}
	}

	.btnList {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 20rpx;

		.btnList-item {
			width: 100%;
			height: 143rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 6rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 0 24rpx;

			.btnList-left {
				flex: 1;
				min-width: 0;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 68rpx;
					height: 68rpx;
					margin-right: 22rpx;
				}

				.btnList-left-content {
					flex: 1;

					.btnList-left-content-title {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #292B3B;
						margin-bottom: 14rpx;
					}

					.btnList-left-content-subTitle {
						font-family: PingFang SC;
						font-weight: 300;
						font-size: 22rpx;
						color: #292B3B;
					}
				}
			}

			.btnList-right {
				width: 26rpx;
				height: 100%;
				display: flex;
				align-items: center;

				image {
					width: 26rpx;
					height: 26rpx;
				}
			}
		}
	}

	.box {
		width: 690rpx;
		margin: 0 auto;
		height: 100%;
		position: relative;

		.box-header {
			position: absolute;
			top: -76rpx;
			left: 0;
			z-index: -1;
			width: 262rpx;
			height: 98rpx;

			.box-header-title {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				position: absolute;
				top: 0;
				left: 0;

				text {
					margin-bottom: 15rpx;
					margin-right: 20rpx;
				}
			}
		}

		.box-more {
			position: absolute;
			right: 0;
			top: -57rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #292B3B;
			display: inline-flex;
			align-items: center;

			image {
				width: 13rpx;
				height: 24rpx;
				margin-left: 10rpx;
			}
		}

		.box-content {
			width: 100%;
			border-radius: 20rpx;

		}
	}

	.lvli {
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 38rpx 26rpx;
		margin-top: 121rpx;

		.lvli-list {
			display: flex;

			.lvli-list-left {
				width: 30rpx;
				height: auto;
				position: relative;

				.lvli-list-spot {
					width: 30rpx;
					height: 30rpx;
				}

				.lvli-list-line {
					width: 1rpx;
					height: calc(100% - 60rpx);
					background: #FFCC02;
					position: absolute;
					top: 30rpx;
					left: 0;
					right: 0;
					bottom: 0;
					margin-top: 20rpx;
					margin: auto;
					transform: translateX(-50%);
				}
			}

			.lvli-list-rig {
				flex: 1;
				margin-left: 21rpx;
				font-family: PingFang SC;
				font-size: 30rpx;
				color: #131313;
				padding-bottom: 81rpx;
				white-space: pre-wrap;
				letter-spacing: 2rpx;
			}
		}
	}

	.realShooting {
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 13rpx 15rpx;
		margin-top: 121rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 18rpx;

		.realShooting-list-item {

			height: 255rpx;
			position: relative;

			image {
				border-radius: 20rpx;
			}

			.realShooting-nums {
				position: absolute;
				right: 1rpx;
				bottom: 11rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #FFFFFF;
				background: rgba(0, 0, 0, 0.4);
				border-radius: 21rpx;
				width: 120rpx;
				height: 41rpx;
				display: flex;
				justify-content: center;
				align-items: center;

			}
		}
	}

	.certificate {
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 24rpx;
		margin-top: 121rpx;

		.scroll-X {
			width: 100%;
			height: 185rpx;
			display: flex;
			white-space: normal;
			overflow: hidden;
			overflow-x: scroll;

			.certificate-item {
				width: auto;
				height: 185rpx;
				display: inline-block;
				margin-right: 16rpx;
			}

			image {
				height: 100%;


			}
		}
	}

	.course {
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 12rpx;
		margin-top: 121rpx;

		.course-list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 12rpx;
		}

		.course-list-item {
			min-width: 0;
			background: #F6F7F8;
			border-bottom-right-radius: 20rpx;
			border-bottom-left-radius: 20rpx;

			.course-list-item-header {
				width: 328rpx;
				height: 191rpx;
				position: relative;
				margin-bottom: 11rpx;

				.course-list-item-header-video {
					border-top-right-radius: 20rpx;
					border-top-left-radius: 20rpx;
				}

				.course-list-item-header-play {
					position: absolute;
					right: 17rpx;
					bottom: 9rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.course-list-item-title {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #292B3B;
				margin-bottom: 14rpx;
				box-sizing: border-box;
				padding: 0 7rpx;
			}

			.course-list-item-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 7rpx;
				padding-bottom: 7rpx;

				.course-list-item-footer-status {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #FF8400;

					.course-list-item-footer-price {
						font-size: 34rpx;
						font-weight: bold;
						color: #e4393c;
						margin-right: 12rpx;
					}

					.course-list-item-footer-status-tx {
						color: #292B3B;
					}
				}

				.course-list-item-footer-nums {
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #292B3B;
					margin-bottom: 10rpx;
					margin-right: 10rpx;

					image {
						width: 28rpx;
						height: 22rpx;
						margin-right: 11rpx;
					}
				}
			}
		}
	}

	.declaration {
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 44rpx 36rpx;
		margin-top: 121rpx;

		&>view {
			font-family: PingFang SC;
			font-size: 32rpx;
			color: #211C1E;
			letter-spacing: 2rpx;
			white-space: pre-wrap;
		}
	}

	.comment {
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 48rpx 24rpx;
		margin-top: 121rpx;
		overflow: hidden;

		.comment-list {
			width: 100%;

			.comment-list-item {
				width: 100%;
				display: flex;
				padding-bottom: 40rpx;

				.comment-list-item-avatar {
					width: 86rpx;
					height: 86rpx;

					image {
						border-radius: 50%;
					}
				}

				.comment-list-item-rig {
					flex: 1;
					min-width: 0;
					margin-left: 22rpx;

					.comment-list-item-rig-header {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 26rpx;

						.comment-list-item-rig-header-l {
							display: flex;
							align-items: center;

							.comment-list-item-rig-header-l-name {
								font-family: PingFang SC;
								font-weight: 600;
								font-size: 28rpx;
								color: #211C1E;
								margin-right: 19rpx;
							}

							image {
								width: 22rpx;
								height: 22rpx;
								// margin-right: 33rpx;
							}

							.comment-list-item-rig-header-l-nums {
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #211C1E;
								margin-right: 40rpx;
								margin-left: 33rpx;
							}

							.comment-list-item-rig-header-l-address {
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #211C1E;
							}
						}

						.comment-list-item-rig-header-r {
							display: flex;
							align-items: center;

							image {
								width: 28rpx;
								height: 24rpx;
								margin-right: 8rpx;
							}

							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #999999;
						}
					}

					.comment-list-item-rig-star {
						display: flex;
						align-items: center;

						.comment-list-item-rig-star-tx {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #727272;
							margin-right: 23rpx;
						}

						.comment-list-item-rig-star-item {
							display: flex;
							align-items: center;

							image {
								margin-right: 9rpx;
								width: 22rpx;
								height: 22rpx;
							}
						}
					}

					.comment-list-item-rig-content {
						background: #F6F7F8;
						border-radius: 0rpx 20rpx 20rpx 20rpx;
						width: 100%;
						box-sizing: border-box;
						padding: 15rpx 25rpx;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #211C1E;
						margin-top: 19rpx;
					}
				}
			}

			.comment-list-item:last-child {
				padding-bottom: 0;
			}
		}
	}

	.hisTimeline {
		width: 690rpx;
		height: 80rpx;
		background: #23B97F;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 24rpx !important;

		image {
			width: 27rpx;
			height: 33rpx;
			margin-right: 23rpx;
		}

		font-family: PingFang SC;
		font-weight: 600;
		font-size: 26rpx;
		color: #FFFFFF;
		margin: 0 auto;
		margin-bottom: 30rpx;
	}

	.tabCard {
		width: 690rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		margin-top: 30rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);

		.tabCard-item {
			width: 220rpx;
			height: 86rpx;
			background: #292929;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;

			image {
				width: 42rpx;
				height: 42rpx;
				margin-right: 13rpx;
			}
		}
	}

	.gz-tip {
		width: 650rpx;
		position: fixed;
		bottom: -150%;
		left: 50rpx;
		transform: rotateX(-50%);
		margin: auto;
		border-radius: 10rpx;
		background: #fde2e2;
		display: flex;
		align-items: center;
		padding: 15rpx 10rpx 15rpx 20rpx;
		box-sizing: border-box;
		z-index: 99;
		justify-content: space-between;
		overflow: hidden;
		transition: all 0.5 ease;

		.gz-tx {
			font-size: 28rpx;
			color: #f56c6c;
		}

		.gz-btn {
			padding: 5rpx 20rpx;
			box-sizing: border-box;
			border: 1rpx solid #fff;
			color: #fff;
			font-size: 28rpx;
			border-radius: 15rpx;
		}

		.gz-close {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			right: -40rpx;
			top: -40rpx;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 50%;

			.gz-close-icon {
				position: absolute;
				top: 45rpx;
				right: 45rpx;
			}
		}
	}

	.gz-ac-tip {
		bottom: 50%;
	}

	.slot-content {
		width: 100%;

		.slot-content-img {
			box-sizing: border-box;
			padding: 30rpx;
			border-radius: 30rpx;

			image {
				width: 100%;
			}
		}
	}

	.createCard {
		width: 690rpx;
		// position: fixed;
		// bottom: 30rpx;
		// left: 30rpx;
		// z-index: 9999;
		padding: 30rpx 10rpx;
		border-radius: 50rpx;
		background: rgba(41, 41, 41, 0.85);
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		box-sizing: border-box;
	}

	.tabs {
		width: 100%;
		overflow-x: scroll;
		white-space: nowrap;
		margin-bottom: 10rpx;
		padding: 10rpx 0;

		.tab-item {

			display: inline-block;
			margin: 0 20rpx;
			padding-bottom: 20rpx;
			text-align: center;

			&>view {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #131313;
				display: flex;
				align-items: center;
			}
		}

		.tab-item-ac {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #12B475;
			position: relative;
			font-weight: bold;
		}
	}

	.footer-btn {
		position: fixed;
		bottom: 40rpx;
		right: 0;
		width: fit-content;
		box-sizing: border-box;
		padding: 0 40rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		z-index: 999;

		.createCard {
			width: 570rpx;
		}
	}

	.backHome {
		width: 80rpx;
		height: 80rpx;
		// position: fixed;
		// right: 40rpx;
		// bottom: 40rpx;
		box-shadow: 0 0 15rpx #21222B;
		border-radius: 50%;
		margin-left: 30rpx;
	}

	.interest-box {
		width: fit-content;
		height: 150rpx;
		position: fixed;
		right: 0;
		top: 50%;
		transform: rotateY(-50%);
		margin: auto;
		background: #2C2C35;
		display: flex;
		justify-content: flex-end;
		border-bottom-left-radius: 15rpx;
		border-top-left-radius: 15rpx;
		z-index: 999;

		.interest-title {
			width: 52rpx;
			background: rgba(62, 59, 77, 1);
			border-bottom-left-radius: 15rpx;
			border-top-left-radius: 15rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #fff;
			font-size: 24rpx;
		}

		.interest-list {
			width: 0;
			height: 150rpx;

			.interest-scroll-Y {
				width: 100%;
				height: 150rpx;
				white-space: nowrap;

				.interest-list-item {
					display: inline-block;
					height: 100%;
					box-sizing: border-box;
					padding-top: 20rpx;
					margin-right: 30rpx;

					image {
						width: 80rpx;
						height: 80rpx;
						margin-bottom: 5rpx;
						border-radius: 10rpx;
					}

					.interest-list-item-tx {
						width: 80rpx;
						text-align: center;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						color: #fff;
						font-size: 18rpx;

					}
				}

				.interest-list-item:first-child {
					margin-left: 30rpx;
				}
			}
		}

		.interest-list-ac {
			width: calc(100vw - 52rpx);
			transition: width 0.5s ease;
		}
	}

	.sendCard-box {
		width: 690rpx;
		margin: 0 auto;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 40rpx;

		.sendCard-list {
			width: 100%;
			height: 140rpx;

			.sendCard-scroll-Y {
				width: 100%;
				height: 140rpx;
				white-space: nowrap;

				.sendCard-list-item {
					display: inline-block;
					height: 100%;
					box-sizing: border-box;
					padding-top: 20rpx;
					margin-right: 20rpx;
					width: 80rpx;

					.sendCard-list-item-col {
						width: 100%;
						height: 68rpx;
						display: flex;
						justify-content: center;
						margin-bottom: 10rpx;
					}

					.circle-item-add-icon {
						width: 68rpx;
						height: 68rpx;
						box-sizing: border-box;
						padding: 4rpx;
						margin-bottom: 10rpx;
						display: flex;
						justify-content: center;
					}

					image {
						width: 100%;
						height: 100%;

						border-radius: 10rpx;

					}

					.sendCard-list-item-tx {
						width: 100%;
						text-align: center;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						color: #fff;
						font-size: 18rpx;
					}
				}

				.sendCard-list-item-ac {
					border-radius: 10rpx;
					background: #F4DEBF !important;

				}

				.circle-item-add {

					// display: inline-block;
					// // height: 100%;
					// box-sizing: border-box;
					// padding-top: 20rpx;
					// margin-right: 30rpx;
					.circle-item-add-icon {
						width: 64rpx;
						height: 64rpx;
						box-sizing: border-box;
						padding: 4rpx;
						margin-bottom: 10rpx;
						border-radius: 10rpx;

						background: #3F3B4C;

						text-align: center;
						line-height: 60rpx;
						// margin-bottom: 12rpx;
					}

					.circle-text {
						width: 100%;
						text-align: center;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						color: #fff;
						font-size: 18rpx;
					}
				}

				// .sendCard-list-item-ac {
				// 	border: 1rpx solid #7B68F3 !important;
				// }

				.sendCard-list-item:first-child {
					margin-left: 30rpx;
				}
			}
		}
	}

	.member {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3, 200rpx);
		grid-gap: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 24rpx;
		margin-top: 121rpx;

		.member-item {
			// width: 100%;
			display: flex;

			// width: 0;
			//  flex-grow: 1;
			// box-sizing: border-box;
			&>image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;

			}

			.member-item-r {
				flex: 1;
				min-width: 0;
				margin-left: 10rpx;

				.member-item-r-name {
					width: 100%;
					font-size: 28rpx;
					font-weight: bold;
					overflow: hidden;
					white-space: nowrap;
					word-break: break-all;
					margin-bottom: 10rpx;
				}

				.member-item-r-title {
					width: 100%;
					font-size: 22rpx;
					color: #8e8e8e;
				}
			}
		}
	}

	.certificate {
		width: 100%;
		display: flex;
		white-space: nowrap;
		overflow-x: scroll;

		.certificate-list {
			display: inline-block;
			margin-right: 24rpx;

			.certificate-list-item {
				image {
					height: 280rpx;
				}
			}
		}
	}

	.linkCardVue {
		padding-top: 30rpx;
	}
</style>